\bibliographystyle{gbt7714-2005}

\chapter{HTML}

\epigraphhead[60]{\epigraph{这是给所有人的。}{\textit{蒂姆·伯纳斯-李}}}

\section{HTML发展简史}

互联网的诞生早于万维网15年，但起初因使用技术复杂难以普及，互联网的用户局限在大学、军事、科研机构等有限的群体。万维网的发明是公认的促使互联网迅速发展的重要因素。万维网借助与HTML文档，使用超文本链接，把不同电脑上的文本、图像、声音等文档链接在一起，使人们不必受电脑操作系统类别和地域等限制，就可以自由浏览和分享信息，互联网的操作因而大大简化。

HTML（HyperText Markup Language，超文本标记语言）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML是万维网的基础，通过结合其他Web技术，可以创造出功能强大的网站，我们通过浏览器看到的信息就是用HTML呈现出来的。

HTML最初是由万维网之父——蒂姆•伯纳斯-李给出了原始定义。1991年，英国物理学家蒂姆•伯纳斯-李在互联网上公布了名为“HTML tag”的文档，详细说明了HTML组织信息的方式。之后，其它互联网组织和公司不断丰富HTML的功能，使之能够以直观的方式显示互联网中的文字、图片等信息，并通过超链接进行访问。随着互联网的爆炸式发展，商业利益的争夺也体现在HTML规则的制定中，以微软为代表的企业开始在浏览器中加入私有标签，这在相当程度上造成了HTML规则的混乱。

为了防止HTML受到商业利益的侵蚀，蒂姆•伯纳斯-李发起成立了万维网联盟（World Wide Web Consortium，W3C）,接管了HTML的维护工作，并于1997年发布了HTML3.2版本和4.0版本。1999年，万维网联盟推出了HTML4.01版本，加入了表格、表单和对象等特征。HTML4.01版本是一个广泛采用的版本，至今仍然是W3C所推荐的HTML版本之一。

HTML4.01发布之后，蒂姆•伯纳斯-李认为互联网的未来应该更加智能化，语义化，所以调整HTML的发展方向，停止了对HTML的升级，在2000年推出了XHTML1.0，XHTML是在HTML4.01基础上的优化和改进，XHTML和HTML4.01之间只有极小但重要的区别。但是广大的互联网用户对于HTML的热情和需求不减反增，蒂姆•伯纳斯-李和万维网联盟最终推翻了之前的想法，认为HTML还是有很大的发展潜力，并于2008年推出了HTML5的草案，将工作重心重新调整到HTML的完善上。

2014年10月28日，HTML5正式发布，\cite{W3C，2014a}国内外一些互联网巨头已经将其应用到各自的网站中，比如Google、Youtube、百度和淘宝等等。

\section{HTML基础概念及规则}

\subsection{HTML基本结构}

HTML文件后缀名为“.htm”或“.html”，是一种包含了HTML标记的文本文件，我们通常所说的网页实质上就是HTML文件，HTML的编辑非常简单，学习成本很低，而且所有网页的源代码都可通过浏览器直接查看。正如蒂姆•伯纳斯－李所说：“（互联网）起飞原因在于，全球的人可随意融入参与。”

创建网页的方式有很多，我们可以新建一个空白的文本文件，编辑之后保存为后缀名为“.htm”的文件即可。在大多数情况下，我们使用专门的网页编辑软件来编辑网页，如：

\begin{lstlisting}
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8" />
  <title>文档标题</title>
</head>
<body>
</body>
</html>
\end{lstlisting}

在上面的HTML文件中我们可以看出，HTML文档可以分为文档声明、网页头部分和网页主体部分三部分。

网页头部分指的是<head>和</head>部分，在这个区域一般放置网页相关的内容，比如网页编码方式、关键词、网页内容描述和网页相关联的文件等等。这些包含在<head>和</head>之间的内容一般不会显示在用户的浏览器中。

网页主体部分指的是包含在<body>和</body>之间的部分，这部分内容是显示在浏览器中的内容，大部分HTML的编辑工作都是在主体部分中完成，如图片、文字、超链接等等。

头部分和主体部分又包含在<html>和</html>之中。浏览器会把<html>和</html>之中的内容视为网页。

\subsection{元素及标签}

元素是构成网页内容的基础单位，元素由起始标签、内容和结束标签构成，如：

\begin{lstlisting}
<h1>一级标题</h1>
\end{lstlisting}

其中<h1>是h1元素的起始标签，标签以“<”开始，以“>”结束，</h1>是结束标签，结束标签中含有”/”，位于起始标签和结束标签之间的“一级标题”是h1元素标记的内容。

元素可以嵌套，比如在段落p中插入图片img。这时，img元素作为整体构成段落元素p的内容。

\begin{lstlisting}
<p>
  <img src="http://img1.gtimg.com/63530531.jpg" />
</p>
\end{lstlisting}

\subsection{属性及属性值}

属性及其值对于某些元素而言是必不可少的，比如新闻网页中经常使用图片来传递信息，图片在HTML中使用img元素来标记，但必须使用相应的属性及其值，告诉浏览器图片存放的位置、图片的大小等信息。如：

\begin{lstlisting}
<img src="http://img1.gtimg.com/63530531.jpg" alt="腾讯网一周图片精选">
\end{lstlisting}

以下属性是全局属性，即几乎所有HTML元素都支持的属性：
\begin{description}
  \item [accesskey] 为元素指定快捷键
  \item [class] 为元素指定类型
  \item [contenteditable] 指定元素内容的可编辑性
  \item [dir] 指定元素内容的文字方向
  \item [hidden] 指定元素的可见性
  \item [id] 为元素指定唯一名称
  \item [lang] 指定元素内容的语言
  \item [spellcheck] 为元素指定拼写检查
  \item [style] 为元素指定样式
  \item [tabindex] 为元素指定tab顺序
  \item [title] 为元素指定提示文字
  \item [translate] 为元素内容提供指定语言的翻译内容
\end{description}

\section{HTML常用元素}

HTML5中定义的元素共有100多个，\cite{W3C，2015}。常见的元素有段落元素p、标题元素h1、图片元素img等等20个左右。

\subsection{根元素}
html元素是HTML文档的根元素，其他所有元素都是html元素的后代。

最好通过lang属性为html指定特定的语言，以方便翻译工具、语音朗读工具确定合适的规则。

\begin{lstlisting}
<!DOCTYPE html>
<html lang="en">
  <head>
  <title>Swapping Songs</title>
  </head>
  <body>
    <h1>Swapping Songs</h1>
    <p>Tonight I swapped some of the songs I wrote with some friends, who
    gave me some of the songs they wrote. I love sharing my music.</p>
  </body>
</html>
\end{lstlisting}

\subsection{文档元数据相关元素}
\subsubsection{head}
head元素是html元素的第一个子元素，用来标记HTML文档的一系列元数据（如文档标题、作者、关键词、相关样式表、相关脚本等等）。
\begin{lstlisting}
<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <META CHARSET="UTF-8">
  <BASE HREF="http://www.example.com/">
  <TITLE>An application with a long head</TITLE>
  <LINK REL="STYLESHEET" HREF="default.css">
  <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
  <SCRIPT SRC="support.js"></SCRIPT>
  <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
 </HEAD>
 <BODY>
 ...
\end{lstlisting}

\subsubsection{title}
title元素位于head元素之中，用来标记整个HTML文档的标题或名称，title元素不得重复出现。

\subsubsection{base}
base元素位于head元素之中，通过href属性设定文档基准URL、通过target属性设定文档中所有超级链接的默认打开方式。
如：
\begin{lstlisting}[label={base-href}]
<!DOCTYPE html>
<html>
    <head>
        <title>This is an example for the &lt;base&gt; element</title>
        <base href="http://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>
\end{lstlisting}
上例\ref{base-href}中base元素href的值必须为绝对地址。p元素中的超级链接最终实际地址为：
\begin{lstlisting}
 "http://www.example.com/news/archives.html"
\end{lstlisting}
以下代码将使得网页中超级链接的打开方式设定为新建窗口打开：

\lstinputlisting[emph={base,target},emphstyle=\bfseries]{example/HTML5/base.html}

上例中的第一个超级链接将在新建窗口打开，第二个超级链接将在自身窗口打开。

\subsubsection{link}
link元素位于head元素中，用来连接和当前文档相关的外部资源。link元素必须指定rel属性。如：
\begin{lstlisting}
<link rel="stylesheet" href="main.css" type="text/css">
\end{lstlisting}

\subsubsection{meta}
meta元素用来标记不能被title、base、link、style和script元素标记的其他各种元数据，如网页关键词、版权信息、页面编码信息等等。

meta元素除了拥有全局性属性外，还可设定name、http-equiv、content和charset属性值。如:

\lstinputlisting[emph={meta},emphstyle=\bfseries]{example/HTML5/meta.html}

\subsubsection{style}
style元素是head元素的子元素，用来设定HTML文档的内部样式表。
\begin{lstlisting}[emph={style},emphstyle=\bfseries]
<!DOCTYPE html>
<html lang="en-US">
 <head>
  <title>My favorite book</title>
  <style>
   body { color: black; background: white; }
   em { font-style: normal; color: red; }
  </style>
 </head>
 <body>
  <p>My <em>favorite</em> book of all time has <em>got</em> to be
  <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
  about the <i lang="la">Felis Catus</i> in modern human society.</p>
 </body>
</html>
\end{lstlisting}

\subsection{区域元素}

\subsubsection{body}

\subsubsection{article}

\subsubsection{section}

\subsubsection{nav}

\subsubsection{aside}

\subsubsection{h1,h2,...h6}

\subsubsection{header}

\subsubsection{footer}

\subsubsection{address}

\subsection{文本元素}

\subsection{分组元素}

\subsection{表单元素}

\subsection{文档节点}

\subsection{表格}

\subsection{交互元素}

\subsection{嵌入内容}

\subsection{脚本}

脚本元素可为文档增加用户交互性。

\subsubsection{script}
元素script能为HTML文档包含动态脚本和数据块，包含在script元素中的内容不会直接显示给用户。

当使用script元素包含动态脚本时，脚本内容既可以直接嵌入在行内，也可以通过scr属性导入外部独立的脚本文件。

script元素除全局性属性之外，还拥有以下几个属性：

\begin{description}
  \item [src] 外部脚本文件的地址
  \item [type] 内嵌资源的类型。type的默认值是"text/javascript"。如果脚本语言不是JavaScript，则必须指定type的值。
  \item [charset] 外部脚本文件的字符编码方式
  \item [async] 使浏览器可以尽快地执行脚本，而不用在下载脚本时阻塞文档解析（异步）。在不支持async的浏览器中，通过动态创建<script>元素并把它插入文档中，来实现脚本的异步载入和执行。
  \item [defer] 使得浏览器延迟脚本的执行，直到文档的载入和解析完成，并可以操作。
  \item [crossorigin] 设置元素处理跨域请求的方式。
\end{description}

\subsubsection{noscript}

\subsubsection{template}

\subsubsection{canvas}

\bibliography{../../bib/yangjh}

